<template>
  <div class="todayLearnContentView">
    <el-button
      type="primary"
      icon="ArrowLeft"
      @click="goBack"
      style="display: block; margin-bottom: 10px"
      >返回</el-button
    >
    <h3 style="display: inline">今天学习的单词</h3>
    <h4 style="display: inline; margin-left: 10px" v-show="!hasLearnableWord">
      您还没有选择单词书,或者已选择的单词书的单词熟练度拉满了!快去添加新的单词书吧!!!
    </h4>
    <h4 style="display: inline; margin-left: 10px" v-show="hasLearnableWord">
      (这些单词会动态地出现在对话或翻译题中,进行对话或翻译会影响熟练度,快去练习吧!!!)
    </h4>
    <el-table :data="todayLearnPlan">
      <el-table-column prop="word" label="单词" width="180px"></el-table-column>
      <el-table-column prop="meaning" label="含义"></el-table-column>
      <el-table-column
        prop="proficiency"
        label="熟练度"
        width="180px"
        sortable
      ></el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted, watch } from "vue";
import router from "@/router";
import { httpClient } from "@/libs/http-client";

const todayLearnPlan = ref([]);
const hasLearnableWord = ref(false);

// 询问是否还有可以学习的单词
const askIfHasLearnableWord = async () => {
  await httpClient.get("/word/hasLearnableWord").then((data) => {
    hasLearnableWord.value = data.hasLearnableWord;
  });
};

// 获取今日学习计划表
const getTodayLearnPlan = async () => {
  await httpClient.get("/word/getTodayWordSchedule").then((data) => {
    data.records.forEach((item) => {
      todayLearnPlan.value.push({
        id: item.id,
        word: item.word,
        meaning: item.meaning,
        proficiency: item.proficiency,
      });
    });
  });
};

watch(hasLearnableWord, (newData) => {
  if (newData) {
    getTodayLearnPlan();
  }
});

onMounted(() => {
  askIfHasLearnableWord();
});
const goBack = () => {
  router.go(-1);
};
</script>

<style>
.todayLearnContentView {
  width: 100%;
  height: 100%;
  padding: 20px;
}
</style>
